<template>
  <div class="lunbo">
    <div class="juzhong">
      <div class="wai">
        <div class="title"></div>
      </div>
      <ul class="henzhe">
        <li>为你推荐</li>
        <li>网络歌曲</li>
        <li>轻音乐</li>
        <li>经典粤语</li>
        <li>官方歌单</li>
        <li>情歌</li>
      </ul>
    </div>
    <div class="block">
      <el-carousel
        trigger="click"
        height="310px"
        :autoplay="false"
        class="juzhong"
      >
        <el-carousel-item v-for="(item, index) in attr" :key="index">
          <div class="heng">
            <div v-for="(item, index) in item.dange" :key="index" class="mar">
              <div class="hezi">
                <img :src="item.img" alt="" />
              </div>
              <p>{{ item.pip }}</p>
              <span>{{ item.bfn }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import instance from "../api/index.js";
export default {
  name: "tabbar",
  data() {
    return {
      attr: null,
    };
  },
  methods: {
    async fn() {
      let { data } = await instance.get("/home");
      console.log(data.Lunbo);
      this.attr = data.Lunbo;
      console.log(data.Lunbo[0].dange);
    },
  },
  created() {
    this.fn();
  },
};
</script>
<style lang="less" scoped>
.lunbo {
  background: url("https://y.qq.com/ryqq/static/media/bg_detail.bb32b2d1.jpg?max_age=2592000") no-repeat;
  .wai {
      padding: 50px 0 24px;
    .title {
      width: 196px;
      height: 40px;
      margin: 0 502px;
      background: url("https://y.qq.com/ryqq/static/media/index_tit.ee334dbf.png?max_age=2592000") no-repeat 0px -250px;
    }
  }
  .henzhe{
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      li{
          margin: 0 24px;
      }
  }
}
.juzhong {
  width: 1200px;
  margin: 0 auto;
}
.heng {
  display: flex;
  .mar {
    margin-right: 20px;
    .hezi {
      width: 224px;
      height: 224px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  p{
      width: 100%;
      height: 20px;
      overflow: hidden;
  }
}
</style>